<template>
	<AppHeader title="书籍详情" :banAnimate="true">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-back-black.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="book-details">
		<div class="top">
			<van-image class="img" :src="state.dataForm.cover_full" />
			<div class="info">
				<div class="t0 ellipsis-multiline2">{{state.dataForm.productName}}</div>
				<div class="t1">适用于：{{state.dataForm.gradeName}}</div>
			</div>
		</div>
		<div class="content">
			<div class="title">
				<div class="left">内容目录
					<span><i>已更新{{ state.chapterlist.length }}个章节</i>/共{{state.dataForm.content}}章节</span></div>
				<div>
					<van-icon name="descending" @click="orderChange" />
				</div>
			</div>
			<van-cell :title="i.name" is-link v-for="i in state.chapterlist" :key="i.id" @click="cellClick(i)" />
		</div>

	</div>

	<AppLoading v-if="loading.page" />
</template>
<script setup>
	import {
		onMounted,
		reactive,
		toRefs,
		nextTick,
		ref
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		newconceptDetail,
		newconceptChapterlist
	} from "@/api/writtenTest.js";

	import AppHeader from "@/components/AppHeader.vue";
	import AppLoading from "@/components/AppLoading.vue";
	const unitlist = []
	const order = ref('0') //1升，0降
	const router = useRouter();
	const route = useRoute();
	const state = reactive({
		loading: {
			page: false,
		},
		dataForm: {},
		chapterlist: [],
		mescrollInstance: null,
		mescrollConfig: {
			down: {
				use: true,
			},
			up: {
				auto: true,
				isBounce: false,
				noMoreSize: 4,
				htmlNodata: '<p class="upwarp-nodata">-- 无更多数据 --</p>',
				callback: (page) => {
					fetchListData(page);
				},
			},
		},
	});
	onMounted(async () => {
		if (route.query.id) {
			await newconceptDetail({
				id: route.query.id
			}).then(res => {
				state.dataForm = res.data
				state.dataForm.content = JSON.parse(res.data.packageinfo.replace(/'/g, '"'))[1].content
			})
			blackplumChapter('asc')
		}
	})
	const orderChange = () => {
		var t = order.value === '1' ? 'asc' : 'desc'
		order.value = t === 'asc' ? '0' : '1' //点击之后重新赋值
		blackplumChapter(t)
	}
	const blackplumChapter = (order) => {
		var params = {
			order,
			id: route.query.id,
			pageSize: state.dataForm.content.slice(0, state.dataForm.content.length - 1)
		}
		newconceptChapterlist(params).then(res => {
			state.chapterlist = res.data
		})
	}
	const cellClick = (item) => {
		router.push({
			path: "/newConcept/detailsUnitList",
			query: {
				versionId: item.id,
				productId: item.productId,
				title: item.name
			},
		});
	}
	const onClickLeft = () => {
		router.go(-1);
	};
	const {
		loading,
		mescrollConfig,
		questionPopupShow
	} = toRefs(state);
</script>
<style scoped lang="scss">
	.book-details {
		background: #ffffff;
		height: 100%;
		padding-top: 44px;
		padding-bottom: 20px;
		overflow: scroll;

		.top {
			display: flex;
			padding: 10px 10px 15px;
			vertical-align: middle;
			border-bottom: 1px solid #e5e5e5;

			.img {
				width: 70px;
				height: 84px;
				margin-right: 15px;
			}

			.info {
				.t0 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 16px;
					color: #333333;
					line-height: 24px;
					text-align: left;
					font-style: normal;
					margin: 10px 0 15px;
				}

				.t1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 14px;
					color: #8E8E8E;
					line-height: 24px;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.content {
			.title {
				line-height: 22px;
				padding: 15px 10px;
				display: flex;
				vertical-align: middle;
				justify-content: space-between;

				.left {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 16px;
					color: #333333;
					line-height: 22px;
					text-align: left;
					font-style: normal;

					span {
						color: #8E8E8E;

						i {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 12px;
							color: #0CB76C;
							line-height: 22px;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.van-icon {
					color: #0CB76C;
				}
			}
		}
	}
</style>